<template>
	<div class="addAreaModel">
		<el-form :model="form" :rules="rules" label-width="150px" ref="form">
			<TitleCard class="model flex-column" title="新建动画">
				<el-row :gutter="50">
					<el-col :span="12">
						<el-form-item label="动画名称" prop="videoName">
							<el-input placeholder="请输入内容" v-model.trim="form.videoName"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="动画ID" prop="id">
							<el-input placeholder="模型ID" v-model.trim="form.id"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="50">
					<el-col :span="12">
						<el-form-item label="一级分类" prop="videoTopCategory	">
							<el-select placeholder="请选择" v-model="form.videoTopCategory	">
								<el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in tableData"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="二级分类" prop="videoTwoCategory	">
							<el-select placeholder="请选择" v-model="form.videoTwoCategory	">
								<el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in tableData"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="50">
					<el-col :span="12">
						<el-form-item label="是否关联项目" prop="isAssociateProject">
							<el-input v-model="form.isAssociateProject"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="项目ID" prop="projectId">
							<el-input v-model="form.projectId"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="50">
					<el-col :span="24">
						<el-form-item label="动画描述" prop="videoDescription">
							<el-input :rows="4" placeholder="100字以内" type="textarea" v-model.trim="form.videoDescription"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col>
						<el-form-item label="选择动画">
							<Upload></Upload>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="50">
					<!-- <el-col :span="12">
						<el-form-item label="动画创建人" prop="directorTelephone">
							<el-input placeholder="请输入内容" v-model.trim="form.directorTelephone"></el-input>
						</el-form-item>
					</el-col>-->
					<el-col :span="12">
						<el-form-item label="动画负责人电话" prop="directorTelephone">
							<el-input placeholder="请输入内容" v-model.trim="form.directorTelephone"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="50">
					<el-col :span="12">
						<el-form-item label="分享类型" prop="shareType">
							<el-select placeholder="请选择" v-model="form.shareType">
								<el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in tableData"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="50">
					<el-col :span="12">
						<el-form-item label="预览类型" prop="previewType">
							<el-select placeholder="请选择" v-model="form.previewType">
								<el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in tableData"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="下载类型" prop="downloadType">
							<el-select placeholder="请选择" v-model="form.downloadType">
								<el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in tableData"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</TitleCard>
		</el-form>
		<div class="btn">
			<el-button @click="back()" size="medium">取消</el-button>
			<el-button @click="handleSubmit" size="medium" type="primary">新增</el-button>
		</div>
	</div>
</template>
<script>
// import axios from 'axios'
import Dict from './dict'
import Api from './api'
import toolApi from '@/api/tool'

export default {
  name: 'addAnimation',
  // props: ['id'],
  data() {
    return {
      form: {
        videoName: '', // 动画名称
        id: 0, // 动画ID
        videoTopCategory: '', // 动画一级分类
        videoTwoCategory: '', // 动画二级分类
        isAssociateProject: 0, // 是否关联项目
        projectId: '', // 项目ID
        videoDescription: '', // 动画描述
        directorTelephone: '', // 动画负责人电话
        shareType: '', // 动画分享类型
        previewType: '', // 动画预览类型
        downloadType: '', // 动画下载类型
      },
      // 测试下拉
      typeOptions: [],
      tableData: '',
      tableData1: '',
      tableData2: '',
      queryParams: {
        dictCode: 'test',
        queryMode: '0'
      },
      fileVOS: [],
      rules: {
        videoName: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        id: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        videoTopCategory: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        videoTwoCategory: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        isAssociateProject: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        projectId: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        videoDescription: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        directorTelephone: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        shareType: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        previewType: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        downloadType: [{ required: true, message: '请输入内容', trigger: 'blur' }],
      }
    }
  },
  computed: {
  },
  created() {
    this.oneDrop()
    // this.oneDrop2()
  },
  methods: {
    handleQuery(xxx) {
      toolApi.getDictItems({ dictCode: xxx, queryMode: '0' })
        .then(data => {
          this.tableData = data.records
          console.log('bbbbbbb', this.tableData[0].name)
        })
      return this.tableData
    },
    // 获取下拉列表
    loadDictOptions(xxx) {
      this.queryParams.dictCode = xxx
      toolApi.getDictItems(this.queryParams).then(data => {
        this.tableData = data.records
      })
    },
    // 某个下拉选项
    oneDrop() {
      this.loadDictOptions('test')
      this.tableData1 = this.tableData
    },
    oneDrop2() {
      this.loadDictOptions('test1')
      this.tableData2 = this.tableData
    },
    // 提交表单
    handleSubmit: function () {
      console.log(this.form)
      this.$refs.form.validate(valid => {
        if (valid) {
          // this.isAssociateProject = 0
          Api.addOrUpdate(this.form).then(() => {
            this.$message.success(this.form.id ? '修改成功' : '新增成功')
            console.log(this.form)
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.addAreaModel {
	.model {
		margin-top: $margin;
		.exp {
			font-size: 12px;
			line-height: 1;
			margin-top: 2px;
		}
		::v-deep .card-content {
			padding: 20px 10%;
			.el-row + .el-row {
				margin-top: $margin;
			}
		}
		.compony-tabel {
			border-collapse: collapse;
			width: 100%;
			thead {
				color: $color-text-h1;
			}
			td,
			th {
				padding: 10px;
				border: 1px solid $color-border-theme;
				text-align: center;
				vertical-align: middle;
			}
			th {
				font-size: 14px;
			}
			td {
				font-size: 14px;
				i {
					color: $color-err;
					cursor: pointer;
				}
				.notes {
					font-size: 12px;
					margin-top: 5px;
					text-align: left;
					color: $color-text-secondary;
				}
			}
		}
	}
	.btn {
		text-align: center;
		padding: 20px 0;
		.el-button + .el-button {
			margin-left: 40px;
		}
	}
}
</style>
